<template>
	<view class="banner_container">
		<view class="create_box" v-if="!ImageData">
			<sp-html2canvas-render domId="main" @renderOver="renderOver" ref="can">
			<view class="main" id="main">
				<view class="photo_box">
					<image  crossorigin="anonymous"  v-if="imgBase64" class="poster" :src="imgBase64" mode=""></image>
					<!-- <img crossorigin="anonymous"  v-if="info && info.photos && info.photos.length" class="poster" :src="info.photos[0]" mode="" /> -->
				</view>
				<view class="content">
					<view class="left">
						<view class="info_item">

							<view class="val">
								{{ info.spxz }}
							</view>
						</view>
						
						<view class="info_item">

							<view class="val">
								买卖、出租电话卡是犯罪行为；
							</view>
						</view>
						<!-- <view class="info_item">
						
							<view class="val">
								推广赚佣金，请联系：{{user_info.mobile}}
							</view>
						</view> -->
					</view>
					<view class="right">
						<view class="qrcode">
							<image :src="qrcode" mode=""></image>
						</view>
						<view class="txt">
							长按或扫码
						</view>
					</view>
				</view>
			</view>
			
		
			</sp-html2canvas-render>
		</view>
		
	 
		
		<image v-else :src="ImageData" mode="widthFix" style="width: 100%;"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				packages_id: "",
				info: {},
				ImageData: "",
				imgBase64: "",
				qrcode: "",
				originBase64: "",
				user_info:[]
			}
		},
		onLoad( e ) {
			if ( e.id ) {
				this.id = e.id
			}
			if (e.packages_id) {
				this.packages_id = e.packages_id
				this.getInfo()
			}
			
		},
		onShow() {
			this.shopInfo()
		},
		methods: {
			
			// 获取用户信息
			shopInfo() {
				var that = this
				that.$tips.showLoading('加载中')
				that.$httpApi.userShop().then((res) => {
					that.$tips.hideLoading()
					if (res.code == 1) {
						that.user_info = res.data.userinfo;
						that.spread = res.data.spread
					}
				})
			},
			
			/**
			 * 获取二维码
			 */
			getQrCode () {
				uni.showLoading({
					mask:true,
					title:"海报生成中.."
				})
				let { id } = this 
				this.$httpApi.GetQrCode({ ids: id  }).then( res => {
					// console.log( res )
					if ( res && res.code == 1 ) {
						// this.originBase64 = res.data
						this.qrcode = this.$baseVal.baseUrl +  res.data
						// console.log(this.qrcode);
					}
				})
				
				setTimeout(() => {
					 this.$refs.can.h2cRender.renderDom();
					 uni.hideLoading()
				}, 1000)
			},
			
			/**
			 * 图片数据
			 */
			renderOver( e ) {
				// console.log( e );
				if ( e ) {
					 this.ImageData = e
				}
			},
			
			/**
			 * 保存到本地相册
			 * @param {Object} image
			 */
			saveTo(imgbase64url) {
		
				// 创建一个链接元素
				// const link = document.createElement('a');
				// link.href = imgbase64url;
				// link.download = 'image.png'; // 设置下载文件名
				
				// 点击链接来触发下载
				// link.click();
				
				// uni.navigateTo({
				//   url: '/pages/order/ShowBanner',
				//   success: () => {
				//     setTimeout(() => {
				//       uni.$emit('e_baseimg', imgbase64url)
				//     }, 600)
				//   }
				// })

			},

			/**
			 * 将远程图片转base64
			 * @param {Object} image 图片链接
			 */
			getImagesBase64( image ) {
				this.$httpApi.ImageToBase64({image})
				.then( res => {
					this.imgBase64 = "data:image/jpeg;base64,"+ res.data
				})
			},	
				
			/**
			 * 获取详情
			 */
			async getInfo() {
				let self = this 
				let { packages_id ,id} = this 
				// this.$tips.showLoading('加载中')
				let params = {
					packages_id: id
				}
				this.$httpApi.goodsInfo(params).then((res)=>{
					// this.$tips.hideLoading()
					if(res.code==1){
						this.info = res.data
						// console.log(res);
						let { photos } = this.info 
						if ( photos&& photos.length) {
						let	imgUrl = photos[0]
						  this.getImagesBase64(imgUrl )
						}
					}
				})
				this.getQrCode()
				
			},
			
			
		},
		
	}
</script>

<style lang="scss" scoped>
	.banner_container {
		width: 100%;
		.create_box {
			opacity: 0;
		}
		// padding-top: var(--window-top);
		.main {
			width: 100%;
			
			.photo_box {
				width: 750rpx;
				height: 750rpx;
				// padding: 30rpx;
				background-color: rgb(94, 184, 136);
				// position: relative;
				// left: 0;
				// top: 0;
				.poster {
					width: 750rpx;
					height: 750rpx;
					// position: absolute;
					// left: 0;
					// top: 0;
				}
				
			}
			.content {
				width: 100%;
				display: flex;
				.left {
					flex: 1.5;
					padding: 20rpx;
					.info_item {
						width: 100%;
						// display: flex;
						// align-items: flex-start;
						padding: 10rpx 0;
						.label {
							// width: 100rpx;
							font-weight: bold;
						}
						.val {
							// width: 300rpx;
							color: #999;
						}
					}
				}
				.right {
					flex: 1;
					padding: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.txt {
						line-height: 60rpx;
					}
					.qrcode {
						width: 200rpx;
						height: 200rpx;
						image {
							width: 200rpx;
							height: 200rpx;
						}
					}
				}
			}
		}
		
		.btn_box {
			width: 100%;
			padding: 20rpx;
			text-align: center;
			display: flex;justify-content: center;
			.abtn {
				width: 500rpx;
			}
		}
	}
</style>